<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="timer_demo">
    <div>
        {{ date }}

    </div>
    <div>
        <span>格式化后的时间:</span>
        {{ date |formatDate }}
    </div>
    <div>
        <span v-pre>{{ 显示 + '{{aaa}}' + 标签 }}</span> <!-- v-pre的内容不会被编译 -->
    </div>
    <div>
        <span>v-html演示:</span><span v-html="aherf"></span>
    </div>

    <div>
        <div>
            <span>过滤器串联演示</span>
            <br/>
            <span>格式化后的时间:</span>
            {{ date |formatDate }}
        </div>
        <div>
            <span>过滤器接受参数演示</span>
            <br/>
            <span>输入第一个参数:</span>
            <input type="text" v-model:name="first_name">
            <br/>
            <span>输入第二个参数:</span>
            <input type="text" v-model:name="scendName">
            <br/>
            <span>接受的第一个参数:{{ first_name }}</span>

            <span>接受的第二个参数:{{ scendName }}</span>
            <br/>
            <span>第一个参数:{{ first_name|fullName(scendName) }}</span>

        </div>


    </div>


</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
    let padDate = function (value) {
        return value < 10 ? '0' + value : value
    }
    let time_app = new Vue({
        el: document.getElementById('timer_demo'),
        data: {
            date: new Date(),
            aherf: '<a href="#">这是一个链接</a>',
            first_name: '',
            scendName: ''
        },
        mounted() {
            let _this = this;//声明一个变量指向Vue实例this,保证作用域一致
            this.timer = setInterval(function () {
                _this.date = new Date();
            }, 1000);

        },
        beforeDestroy() {
            if (this.timer) {
                clearInterval(this.timer)
            }
        },
        filters: {
            formatDate: function (value) { //这里的value就是需要过滤的数据
                let date = new Date(value)
                let year = date.getFullYear()
                let mounth = padDate(date.getMonth() + 1)
                let day = padDate(date.getDate())
                let hours = padDate(date.getHours())
                let minutes = padDate(date.getMinutes())
                let seconds = padDate(date.getSeconds())
                //将整理好的数据返回出去
                return year + '-' + mounth + '-' + day + '-' + hours + ':' + minutes + ':' + seconds
            },
            fullName: function (value, args1) {
                return value + args1
            }
        }
    })
</script>

</body>
</html>